<template>
  <div class="thirdDay">
    <el-row>
      <el-col style="text-align: left;">0.单选框</el-col>
      <el-col>
        <el-radio v-model="radioValue" label="1">单选1</el-radio>
        <el-radio v-model="radioValue" label="2">单选2</el-radio>
        <el-radio v-model="radioValue" label="2" disabled>禁止选择</el-radio>
      </el-col>

      <el-col>
        <el-radio-group v-model="radioValue">
          <el-radio :label="1">组单选1</el-radio>
          <el-radio :label="2">组单选2</el-radio>
        </el-radio-group>
      </el-col>

      <el-row style="text-align: left;">
        <el-row>1.按钮样式的单选组合。</el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-radio-group v-model="radio0">
              <el-radio-button label="小军"></el-radio-button>
              <el-radio-button label="小芳"></el-radio-button>
              <el-radio-button label="小虎"></el-radio-button>
              <el-radio-button label="小🐩"></el-radio-button>
            </el-radio-group>
          </el-col>
          <el-col :span="10">
            <el-radio-group v-model="radio0" size="small">
              <el-radio-button label="小军"></el-radio-button>
              <el-radio-button label="小芳"></el-radio-button>
              <el-radio-button label="小虎"></el-radio-button>
              <el-radio-button label="小🐩"></el-radio-button>
            </el-radio-group>
          </el-col>
          <el-col>
            <el-radio-group v-model="radio0" size="mini">
              <el-radio-button label="小军"></el-radio-button>
              <el-radio-button label="小芳"></el-radio-button>
              <el-radio-button label="小虎"></el-radio-button>
              <el-radio-button label="小🐩"></el-radio-button>
            </el-radio-group>
          </el-col>
          <el-col>
            <el-radio v-model="radio1" label="1" border>备选项1</el-radio>
            <el-radio v-model="radio1" label="2" border>备选项2</el-radio>
          </el-col>
        </el-row>
      </el-row>

      <el-row>
        <el-row style="text-align: left;">2.Checkbox 多选框</el-row>
        <el-row>
          <el-checkbox v-model="checked0" border>多选一</el-checkbox>
          <el-checkbox v-model="checked1">多选二</el-checkbox>
        </el-row>
        <el-row>
          <el-checkbox-group v-model="checkList">
            <el-checkbox label="复选框 A"></el-checkbox>
            <el-checkbox label="复选框 B"></el-checkbox>
            <el-checkbox label="复选框 C"></el-checkbox>
            <el-checkbox label="禁用" disabled></el-checkbox>
            <el-checkbox label="选中且禁用" disabled></el-checkbox>
          </el-checkbox-group>
        </el-row>

        <el-row>
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
          >全选</el-checkbox>
          <div style="margin: 15px 0;"></div>
          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
          </el-checkbox-group>
        </el-row>

        <el-row>
          <el-checkbox-group v-model="checkboxGroup1">
            <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
          </el-checkbox-group>
        </el-row>

        <el-row>
          <el-row style="text-align: left;">3.Input 输入框</el-row>
          <el-row>
            <el-input v-model="input" placeholder="请输入内容" clearable suffix-icon="el-icon-date"></el-input>
            <el-input placeholder="请输入内容" v-model="input" :disabled="true">
              <i slot="suffix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea"></el-input>
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="请输入内容"
              v-model="textarea3"
            ></el-input>
            <el-input placeholder="请输入内容" v-model="input3">
              <template slot="prepend">Http://</template>
            </el-input>
            <div style="margin-top: 15px;">
              <el-input placeholder="请输入内容" v-model="input4">
                <template slot="append">.com</template>
              </el-input>
            </div>
            <div style="margin-top: 15px;">
              <el-input placeholder="请输入内容" v-model="input5" class="input-with-select">
                <el-select v-model="select" slot="prepend" placeholder="请选择">
                  <el-option label="餐厅名" value="1"></el-option>
                  <el-option label="订单号" value="2"></el-option>
                  <el-option label="用户电话" value="3"></el-option>
                </el-select>
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </div>
          </el-row>
        </el-row>
      </el-row>

      <el-row>
        <el-row style="text-align: left;">4.InputNumber 计数器</el-row>
        <el-row>
          <!-- precision 的值必须是一个非负整数，并且不能小于 step 的小数位数。 -->
          <el-input-number
            v-model="num1"
            @change="handleChange"
            :min="1"
            :max="10"
            :step="0.1"
            :precision="2"
            label="描述文字"
          ></el-input-number>
        </el-row>

        <el-row style="margin-top:20px;">
          <el-input-number
            v-model="num8"
            controls-position="right"
            @change="handleChange"
            :min="1"
            :max="10"
          ></el-input-number>
        </el-row>
      </el-row>
    </el-row>
  </div>
</template>

<script>
const cityOptions = ["上海", "北京", "广州", "深圳"];
export default {
  name: "thirdDay",
  data() {
    return {
      radioValue: "1",
      radio0: "小军",
      radio1: "1",
      checked0: true,
      checked1: false,
      checkList: ["选中且禁用", "复选框 A"],
      checkedCities: ["上海", "北京"],
      cities: cityOptions,
      checkAll: false,
      isIndeterminate: true,
      checkboxGroup1: ["上海"],
      input: "",
      textarea: "",
      textarea3: "",
      input3: "",
      input4: "",
      input5: "",
      select: "",
      num1: 5,
      num8: 1
    };
  },
  methods: {
    handleCheckAllChange(val) {
      console.log(val + "___" + this.checkAll);
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    handleChange(value) {
      console.log(value);
    }
  },
  watch: {
    checkList: function(value) {
      console.log("进来了    " + value);
      this.checkList = value;
    }
  }
};
</script>

<style>
</style>
